<template>
  <div class="wrapper">
    <div class="merchant-detail">
      <div class="top">
        <!-- 商家头像 -->
        <van-image class="merchant-avatar" round src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"/>

        <!-- 商家信息 -->
        <div class="merchant-info">
          <h2 class="merchant-name">{{ merchant.name }}</h2>

          <div class="container">
            <van-rate gutter="1" v-model="merchant.rating" size="14px" allow-half count="1"/>
            <span>4.9</span>
            <span style="margin-left: 4px;">配送费6元</span>
            <span style="margin-left: 4px;"><van-icon name="location" color="#1989fa"/>距您11KM</span>
          </div>
        </div>
      </div>

      <div class="merchant-description">
        <van-text-ellipsis :content="merchant.description" expand-text="展开" collapse-text="收起"/>
      </div>

      <van-cell style="padding-left:0 ;padding-right: 0;" :value="merchant.businessHours">
        <template #title>
          <van-tag type="primary">营业中</van-tag>
        </template>
      </van-cell>
    </div>

    <van-tabs v-model:active="activeName" color="#FFC200" title-active-color="#FFC200">
      <van-tab title="菜品" name="菜品"/>
      <van-tab title="评价" name="评价"/>
    </van-tabs>

    <div class="content">

      <!-- 分类 -->
      <div class="left">
        <van-sidebar v-model="activeKey">
          <van-sidebar-item v-for="item in foodList" :key="item.id" :title="item.name" @click="anchors(item.name)"/>
        </van-sidebar>
      </div>
      <!-- 餐品列表 -->
      <div class="right">
        <div v-for="item in foodList" :key="item.id" :id="item.name">
          <div class="title">{{ item.name }}</div>

          <van-card v-for="(food, i) in item.foodSimpleVOList" :price="food.price" :desc="food.description"
                    :title="food.name"
                    :thumb="food.photo">
            <template #num>
              <template v-if="food.flavor">

                <span @click="handleSelectSpecification(food)" style="background-color: #F69533;color: #fff;padding: 2px;border-radius: 1px;">选择规格</span>
              </template>
              <template v-else>
                <van-stepper min="0" default-value="0" theme="round" button-size="22" disable-input/>
              </template>
            </template>
          </van-card>
        </div>
      </div>


    </div>

  </div>


  <div class="footer">
    <van-action-bar>
      <van-action-bar-icon @click="cartVisible=true" icon="cart-o" text="购物车" badge="5"/>
      <van-action-bar-button type="warning" to="/book/confirm" text="结算"/>
    </van-action-bar>
  </div>


  <!-- 购物车详情显示组件 -->
  <van-action-sheet v-model:show="cartVisible" title="购物车详情">
    <div class="cart-list">

      <van-card v-for="cart in cartList" :price="cart.price" :desc="cart.description"
                :title="cart.name"
                :thumb="cart.photo">
        <template #num>
            <van-stepper min="0" :default-value="cart.count" theme="round" button-size="22" disable-input/>
        </template>
      </van-card>

    </div>
  </van-action-sheet>


  <!--规格对话框-->

  <van-dialog v-model:show="specificationDialogVisible" :title="specificationFood.foodName" confirmButtonText="关闭">
    <ul style="padding: 10px">
      {{specificationFood}}
      <template v-for="flavor in specificationFood.flavorList">
        <li>
          <p style="font-size: 14px;font-weight: bold;margin-bottom: 10px;">{{flavor.name}}</p>

            <div style="display: flex;">
              <template v-for="item in flavor.item" >
                <template v-if="item.selected==1">
                  <span @click="handleSelectFlavorItem(specificationFood.foodId,flavor.name,item.value)" style="border-radius:2px;padding: 5px 8px;font-size: 12px;color: #8c939d;border: 1px solid #8c939d;margin-right: 4px; background-color: red">{{item.value}}</span>
                </template>
                <template v-else>
                  <span @click="handleSelectFlavorItem(specificationFood.foodId,flavor.name,item.value)" style="border-radius:2px;padding: 5px 8px;font-size: 12px;color: #8c939d;border: 1px solid #8c939d;margin-right: 4px;">{{item.value}}</span>
                </template>
              </template>
            </div>

        </li>
      </template>
    </ul>

    <div style="display: flex;justify-content: flex-end;padding: 10px" @click="handleAddToCart">
      <p style="background-color: darkorange;padding: 5px 8px;border-radius:2px;"><span
          style="font-size: 20px;color:#fff;font-weight: bold">+</span>加入购物车</p>
    </div>
  </van-dialog>

</template>

<script setup lang="ts">
import {ref, reactive} from 'vue';

import {getShopCategoryDetail} from "@/api/shop.js"
import {plusCart,minusCart} from "@/api/cart.js"

let cartList = reactive([]);

let foodList = reactive([]);

let specificationDialogVisible = ref(false);
let cartVisible = ref(false);

let specificationFood=reactive({
  foodId:null,
  foodName:"",
  flavorList:[]
});



//购物车中菜品列表
let cartFoodList=reactive([]);


const handleSelectFlavorItem = (foodId,flavorName,flavorItem)=>{
  let flavorList = specificationFood.flavorList;
  if(flavorList){
    for(let flavor of flavorList){
      if(flavor.name == flavorName){
        for(let item of flavor.item){
          if(item.value==flavorItem){
            item.selected=1;
          }else{
            item.selected=0;
          }
        }
      }
    }
  }
}


const handleAddToCart=()=>{

  if(specificationFood!=null){
    //发送请求

    let flavorList = specificationFood.flavorList;


    let selectedFlavorInfo = {};

    selectedFlavorInfo.flavorItem = flavorList[0].name;
    console.log(selectedFlavorInfo);
    for(let flavorItem of flavorList[0].item){
      if(flavorItem.selected==1){
        selectedFlavorInfo.flavorValue = flavorItem.value;
        break;
      }
    }

    if(cartList.lenght == 0){
      cartList.push({
        "foodId":specificationFood.foodId,
        "flavorItem":selectedFlavorInfo.name,
        "flavorValue":selectedFlavorInfo.value,
        "name":specificationFood.foodName,
        "price":specificationFood.price,
        "photo":specificationFood.photo,
        "count":1,
      });
    }

    //判断之前是否存在
    let isExist=false;
    for(let cartItem of cartList){
      if(cartItem.foodId == specificationFood.foodId && cartItem.flavorItem == specificationFood.flavorItem &&  cartItem.flavorValue == specificationFood.flavorValue ){
        cartItem.count = cartItem.count + 1;
        isExist = true;
        break;
      }
    }

    if(!isExist){
      cartList.push({
        "foodId":specificationFood.foodId,
        "flavorItem":selectedFlavorInfo.name,
        "flavorValue":selectedFlavorInfo.value,
        "name":specificationFood.foodName,
        "price":specificationFood.price,
        "photo":specificationFood.photo,
        "count":1,
      });
    }
    plusCart(specificationFood.foodId,selectedFlavorInfo.flavorItem,selectedFlavorInfo.flavorValue);
  }
}


let merchant = reactive({
  name: '商家名称',
  rating: 4.8,
  commentCount: 1234,
  address: '商家地址',
  phone: '1234567890',
  description: '这是一家提供美食和优质服务的商家美食和优质服务的商家美食和优质服务的商家士大夫士大夫士大夫士大夫士大夫胜多负少。',
  businessHours: '周一至周日 10:00-22:00'
});

let activeName = ref("评价");
let activeKey = ref(0);


getShopCategoryDetail(1).then((resp) => {
  foodList.length = 0;
  foodList.push(...resp.data);
}).catch((error) => {

})

let anchors = (id) => {
  document.querySelector("#" + id).scrollIntoView();
}


//处理选择规格事件
const handleSelectSpecification = (food)=>{
  specificationDialogVisible.value = true;
  specificationFood.foodName = food.name;
  specificationFood.foodId = food.id;

  specificationFood.price = food.price;
  specificationFood.photo = food.photo;

  let flavorInfo = [];
  let oriFlavorList = JSON.parse(food.flavor);

  for(let flavor of oriFlavorList){
    let flavorName = flavor.name;
    let flavorItem = flavor.item.map((item)=>{
      return {"selected":false,"value":item};
    });
    flavorInfo.push({"name":flavorName,item:flavorItem});
  }
  specificationFood.flavorList = flavorInfo;
}

</script>

<style scoped>

.wrapper {
  display: flex;
  flex-direction: column; /* 默认为列方向，但如果需要可改为行方向 */
  height: 100%; /* 或者你想要的任何高度 */
}

.wrapper .content {
  flex: 1; /* 这将使.child2占据剩余空间 */
  overflow: scroll;
}

.merchant-detail {
  padding: 10px 10px 0 10px;
  width: 355px;
  box-sizing: border-box;
  background-color: #fff;
  border-radius: 4px;

  margin: 10px auto;
}

.merchant-detail .top {

  display: flex;
  flex-direction: row;
  align-content: center;
}

.merchant-detail .merchant-avatar {
  width: 60px;
  height: 60px;
  margin-right: 4px;
}

.merchant-info {
  flex: 1;
}

.merchant-info .merchant-name {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 4px;
}

.merchant-info .container {
  display: flex;
  align-items: baseline;
  line-height: 14px;
  font-size: 14px;
}

.merchant-description {
  font-size: 14px;
  margin-bottom: 4px;
}

.content {
  margin-top: 10px;
  padding-bottom: 50px;
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
}

.content .left {
  overflow: scroll;
  height: 100%;
}


.content .right {
  overflow: scroll;
  flex: 1;
  background-color: #fff;
}

.content .right .title {
  padding-left: 16px;
  font-size: 16px;
}

.footer {

}
</style>